import { defineComponent, ref, watch, type PropType } from "vue";
import ProTable, {
  type ProTableExpose,
  type ProTableProps,
} from "../pro-table";
import ProForm, { type ProFormExpose } from "../pro-form";
import type { ProColumnType, ProFormColType } from "../interface";
import Button from "ant-design-vue/es/button";
import type { ColProps } from "ant-design-vue/es/grid/Col";

export type SearchListExpose = {
  /** 保留表单参数，重置页码，刷新数据 */
  reload: () => void;
  /** 保留表单参数，保留页码，刷新数据 */
  refresh: () => void;
  /** 所有参数重置，刷新数据 */
  reset: () => void;
};

export default defineComponent({
  name: "SearchList",
  props: {
    /** 搜索栏的表单列配置 */
    columns: {
      required: true,
      type: Array as PropType<ProColumnType<any>[]>,
      default: () => [],
    },
    /** 搜索栏的表单初始值 */
    initialValues: {
      type: Object as PropType<Record<string, any>>,
    },
    /**表格的请求函数 */
    request: {
      required: true,
      type: Function as PropType<
        (params: Record<string, any>) => ReturnType<ProTableProps["request"]>
      >,
    },
    /**搜索栏的表单中，每个搜索项的列属性 */
    colProps: {
      type: Object as PropType<ColProps>,
      default: () => ({
        span: 12,
        xs: 24,
        sm: 24,
        md: 12,
        lg: 6,
        xl: 6,
        xxl: 4,
      }),
    },
  },
  setup(props, ctx) {
    const tableRef = ref<ProTableExpose>();
    const formRef = ref<ProFormExpose>();

    const refresh: SearchListExpose["refresh"] = () => {
      tableRef.value?.reload();
    };

    const reload: SearchListExpose["reload"] = () => {
      tableRef.value?.resetPageFields();
      tableRef.value?.reload();
    };

    const reset: SearchListExpose["reset"] = () => {
      formRef.value?.resetFields();
      tableRef.value?.resetPageFields();
      tableRef.value?.reload();
    };

    const submitBtns = [
      <Button type="primary" onClick={reload}>
        查询
      </Button>,
      <Button onClick={reset}>重置</Button>,
    ];

    ctx.expose({
      reload,
      refresh,
      reset,
    } as SearchListExpose);

    const waitFormMounted = () => {
      return new Promise((resolve) => {
        if (formRef.value) {
          resolve(true);
        } else {
          setTimeout(() => {
            resolve(waitFormMounted());
          }, 100);
        }
      });
    };
    const allFieldReq = async (pagesParams: Record<string, any>) => {
      await waitFormMounted();

      return props.request({
        ...pagesParams,
        ...formRef.value?.getFieldsValue(),
      });
    };

    return () => (
      <div>
        <ProForm
          ref={formRef}
          initialValues={props.initialValues}
          columns={props.columns as ProFormColType<any>[]}
          colProps={props.colProps}
        >
          {{
            after: () => (
              <div class="flex gap-[10px]">
                {ctx.slots.submitBtns
                  ? ctx.slots.submitBtns(submitBtns, { reload, refresh })
                  : submitBtns}
              </div>
            ),
          }}
        </ProForm>
        <ProTable
          class="mt-[15px]"
          ref={tableRef}
          columns={props.columns}
          request={allFieldReq}
        />
      </div>
    );
  },
});
